<template>
	<h2 class="center">登录</h2>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[
			  { required: true, message: '请填写用户名' }
			]" />
			<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>
	<div class="right side-margin">
		<p>没有帐号了，去<router-link to="/regist">注册</router-link>
		</p>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue';
	import {
		Toast
	} from 'vant';
	import 'vant/es/toast/style';
	import {
		login
	} from "@/api/user.ts";
	import router from '@/router'
	// 使用userStore
	import {
		useUsersStore
	} from '@/store/user'

	const store = useUsersStore()
	const username = ref("")
	const password = ref("")
	const onSubmit = (data) => {
		console.log("login on Submit")
		// 定义接口函数
		// 调用接口函数
		// axios本质上是一个Promise
		store.login(data)
			.then(res => {
				if (res.code == 0) {
					Toast.success('成功文案');
					// store.getName(res.data.username)
					// localStorage.setItem("username1",res.data.username)
					router.push({
						name: "home",
						query: {
							date: new Date().getTime()
						}
					})
				} else {
					Toast.fail('失败文案');
					console.log(res.message)
				}
			})
			.catch(err => {
				console.log("出错了~", err)
			})
	};
</script>

<style scoped lang="scss">
</style>
